<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>王者荣耀官方网站-腾讯游戏</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 顶部模块区域 -->
    <div class="top">
      <div class="top-area top_wrapper">
        <div class="left-area">
          <h2 class="logo">
            <a href="#">腾讯游戏</a>
          </h2>
          <div class="recommend">
            <img src="./img/recommend_game.jpg" alt="" />
            <div href="#" class="recommend-ad">
              <img src="./img/recommend_ad.jpg" alt="" />
            </div>
          </div>
        </div>
        <ul class="right-area">
          <li class="item">
            <a href="#" class="growth">成长守护平台</a>
          </li>
          <li class="item">
            <a href="#" class="ranking"
              >腾讯游戏排行榜
              <div class="dropdown">
                <iframe
                  src="https://game.gtimg.cn/images/js/title/title_game_rank.html"
                  frameborder="0"
                >
                </iframe>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 主要内容区域 -->
    <div class="page">
      <!-- 头部导航栏区域 -->
      <div class="header">
        <div class="area header_wrapper">
          <div class="left-area">
            <h1 class="logo">
              <a href="#">王者荣耀</a>
            </h1>
            <ul class="nav-list">
              <li class="item">
                <a href="#">
                  游戏资料
                  <span class="desc">DATA</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  内容中心
                  <span class="desc">CONTENTS</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  赛事中心
                  <span class="desc">MATCH</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  百态王者
                  <span class="desc">CULTURE</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  社区互动
                  <span class="desc">COMMUNITY</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  玩家支持
                  <span class="desc">PLAYER</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  IP新游
                  <span class="desc">NEW GAMES</span>
                </a>
              </li>
            </ul>
            <div class="search">
              <a href="#"></a>
            </div>
          </div>
          <div class="right-area">
            <a href="#" class="image">
              <img src="./img/header_login.png" alt="" />
            </a>
            <div class="info">
              <a href="#">欢迎登录</a>
              <p>登录后查看游戏战绩</p>
            </div>
          </div>
        </div>
        <div class="dropmenu">
          <div class="inner">
            <dl class="list">
              <dd class="item">
                <a href="#">版本介绍</a>
              </dd>
              <dd class="item">
                <a href="#">游戏介绍</a>
              </dd>
              <dd class="item">
                <a href="#">英雄资料</a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_hot"></i>
                  爆料站
                </a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  世界观体验站
                </a>
              </dd>
              <dd class="item">
                <a href="#">游戏壁纸</a>
              </dd>
            </dl>
            <dl class="list">
              <dd class="item">
                <a href="#">攻略中心</a>
              </dd>
              <dd class="item">
                <a href="#">英雄攻略</a>
              </dd>
              <dd class="item">
                <a href="#">视频中心</a>
              </dd>
              <dd class="item">
                <a href="#">开放素材库</a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  内容共创平台
                </a>
              </dd>
            </dl>
            <dl class="list">
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_hot"></i>
                  KPL
                </a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_hot"></i>
                  挑战者杯
                </a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_hot"></i>
                  全国大赛
                </a>
              </dd>
              <dd class="item">
                <a href="#">女子公开赛</a>
              </dd>
              <dd class="item">
                <a href="#">K甲联赛</a>
              </dd>
              <dd class="item">
                <a href="#">高校联赛</a>
              </dd>
              <dd class="item">
                <a href="#">全民赛</a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  赛事数据
                </a>
              </dd>
            </dl>
            <dl class="list">
              <dd class="item">
                <a href="#">荣耀·传承</a>
              </dd>
              <dd class="item">
                <a href="#">王者文化站</a>
              </dd>
              <dd class="item">
                <a href="#">万千世界</a>
              </dd>
              <dd class="item">
                <a href="#">星光殿堂</a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  IP共创计划
                </a>
              </dd>
              <dd class="item">
                <a href="#">商户特权</a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  龙翼王者卡
                </a>
              </dd>
            </dl>
            <dl class="list">
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_hot"></i>
                  创意互动营
                </a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_hot"></i>
                  王者营地
                </a>
              </dd>
              <dd class="item">
                <a href="#">微信圈子</a>
              </dd>
              <dd class="item">
                <a href="#">官方微博</a>
              </dd>
              <dd class="item">
                <a href="#">微信公众号</a>
              </dd>
              <dd class="item">
                <a href="#">手Q订阅号</a>
              </dd>
            </dl>
            <dl class="list">
              <dd class="item">
                <a href="#">腾讯游戏防沉迷</a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_guard"></i>
                  成长守护平台
                </a>
              </dd>
              <dd class="item">
                <a href="#">对局环境情报站</a>
              </dd>
              <dd class="item">
                <a href="#">客服专区</a>
              </dd>
              <dd class="item">
                <a href="#">礼包兑换</a>
              </dd>
              <dd class="item">
                <a href="#">自助服务</a>
              </dd>
            </dl>
            <dl class="list">
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  王者荣耀
                </a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  代号:破晓
                </a>
              </dd>
              <dd class="item">
                <a href="#">
                  <i class="icon_type icon_type_fans"></i>
                  代号:启程
                </a>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <!-- page背景链接部分 -->
      <a href="#" class="link"></a>
      <!-- 主体区域 -->
      <div class="main main_wrapper">
        <!-- 新闻区域 -->
        <div class="news-section">
          <div class="banner">
            <ul class="image-list">
              <li class="item">
                <a href="#">
                  <img src="./img/banner_list/banner_item01.jpeg" alt="" />
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/banner_list/banner_item02.jpeg" alt="" />
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/banner_list/banner_item03.jpeg" alt="" />
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/banner_list/banner_item04.jpeg" alt="" />
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/banner_list/banner_item05.jpeg" alt="" />
                </a>
              </li>
            </ul>
            <ul class="title-list">
              <li class="item active">
                <a href="#">源梦新皮肤</a>
              </li>
              <li class="item">
                <a href="#">520皮肤动画</a>
              </li>
              <li class="item">
                <a href="#">合作款香水上线</a>
              </li>
              <li class="item">
                <a href="#">第八届高校联赛</a>
              </li>
              <li class="item">
                <a href="#">520宠粉日</a>
              </li>
            </ul>
          </div>
          <div class="news">
            <ul class="title-list">
              <li class="item active">
                <a href="#">热门</a>
              </li>
              <li class="item">
                <a href="#">新闻</a>
              </li>
              <li class="item">
                <a href="#">公告</a>
              </li>
              <li class="item">
                <a href="#">活动</a>
              </li>
              <li class="item">
                <a href="#">赛事</a>
              </li>
              <li class="item more">
                <a href="#">...</a>
              </li>
            </ul>
            <p class="notice">
              <a href="#">5月3日，我成为王者婚礼的女主角I 《营地·人物》</a>
            </p>
            <ul class="news-list">
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_hot">
                    狄某有话说 | 鬼谷子：姜子牙你可真是个老六
                  </span>
                </a>
                <i class="news-time">05/19</i>
              </li>
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_notice">
                    5月19日全服不停机更新公告
                  </span>
                </a>
                <i class="news-time">05/18</i>
              </li>
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_hot">
                    元歌源梦皮肤研发进展沟通【老亚瑟的答疑时间】
                  </span>
                </a>
                <i class="news-time">05/17</i>
              </li>
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_hot">
                    元歌源·梦新皮肤最新进展
                  </span>
                </a>
                <i class="news-time">05/16</i>
              </li>
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_hot">
                    新英雄首款皮肤调整【老亚瑟的答疑时间】
                  </span>
                </a>
                <i class="news-time">05/13</i>
              </li>
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_hot">
                    狄某有话说 |挂机还说队友不配赢？不可取！
                  </span>
                </a>
                <i class="news-time">05/13</i>
              </li>
              <li class="item">
                <a href="#">
                  <span class="news-title news_type news_type_hot">
                    【霸王别姬-抽限定皮肤】活动开启公告
                  </span>
                </a>
                <i class="news-time">05/11</i>
              </li>
            </ul>
          </div>
          <div class="download">
            <a href="#" class="download-btn"></a>
            <a href="#" class="guard-btn"></a>
            <a href="#" class="experience-btn"></a>
          </div>
          <div class="shiling"></div>
          <div class="fanchenmi"></div>
        </div>
        <!-- 入口区域 -->
        <ul class="entrance-section">
          <li class="item">
            <a href="#">
              <img src="./img/entrance_list/entrance_item01.jpg" alt="" />
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="./img/entrance_list/entrance_item02.png" alt="" />
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="./img/entrance_list/entrance_item03.jpg" alt="" />
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="./img/entrance_list/entrance_item04.png" alt="" />
            </a>
          </li>
        </ul>
        <div class="content-section">
          <div class="left-content">
            <!-- 内容中心 -->
            <div class="content-center">
              <div class="section_header">
                <div class="header_left">
                  <h3 class="title">内容中心</h3>
                </div>
                <div class="header_right">
                  <a href="#" class="more">更多</a>
                </div>
              </div>
              <div class="tab_control">
                <div class="tab_control_item active">精品栏目</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item">赛事精品</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item">英雄攻略</div>
              </div>
              <div class="tab_keyword">
                <div class="item active">最新</div>
                <div class="item">马菠萝奇闻录</div>
                <div class="item">王者克制论</div>
                <div class="item">王者视角</div>
                <div class="item">策见打</div>
                <div class="item">峡谷460</div>
                <div class="item">百星王者带你飞</div>
                <div class="item">狄仁杰封神榜</div>
              </div>
              <ul class="video_list">
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album01.png" alt="" />
                      <div class="info">
                        <span class="info_count">8976</span>
                        <span class="info_date">2022-05-15</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【狄仁杰封神榜】第86期 开透视解说？队友大义灭亲极度舒适
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album02.png" alt="" />
                      <div class="info">
                        <span class="info_count">7407</span>
                        <span class="info_date">2022-05-15</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【马菠萝奇闻录44】：人形雷达，发育路大杀器李元芳
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album03.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">2.2万</span>
                        <span class="info_date">2022-04-30</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album04.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">1.7万</span>
                        <span class="info_date">2022-04-30</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【狄仁杰封神榜】第85期 抓获草外狂徒 无视野乱杀疑点重重
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album02.png" alt="" />
                      <div class="info">
                        <span class="info_count">2.9万</span>
                        <span class="info_date">2022-04-24</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【马菠萝奇闻录】第42期：转职成功，峡谷新晋野王报道！
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album06.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">1.4万</span>
                        <span class="info_date">2022-04-24</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【狄仁杰封神榜】第84期 带着科技送外卖 隔壁典韦都馋哭了！
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album07.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">1.3万</span>
                        <span class="info_date">2022-04-17</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【狄仁杰封神榜】第83期 一个举动 让队友集体锁定安琪拉
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album08.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">4.7万</span>
                        <span class="info_date">2022-04-17</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【马菠萝奇闻录】第41期：新赛季赢在起跑线，3分钟掌握分路和视野调整
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <!-- 赛事中心 -->
            <div class="match-center">
              <div class="section_header">
                <div class="header_left">
                  <h3 class="title title_icon_match">赛事中心</h3>
                </div>
                <div class="header_right">
                  <a href="#" class="more">更多</a>
                </div>
              </div>
              <div class="tab_control">
                <div class="tab_control_item item_wrap active">KPL</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item item_wrap">挑战者杯</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item item_wrap">K甲联赛</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item item_wrap">全国大赛</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item item_wrap">高校联赛</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item item_wrap">TGA</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item item_wrap">微信游戏邀请赛</div>
                <div class="tab_control_line"></div>
              </div>
              <div class="match-news">
                <a class="news-left">
                  <img src="./img/match_01.jpg" alt="" />
                </a>
                <div class="news-right">
                  <a href="#" class="title">
                    2022年KPL春季赛最佳阵容出炉，武汉eStar全员一阵！
                  </a>
                  <a href="#" class="subtitle">
                    2022年KPL王者荣耀职业联赛春季赛最佳阵容现已出炉，大家一起来看看吧！
                  </a>
                  <ul class="match-list">
                    <li class="match-item">
                      <div class="match-left">
                        <span class="match-icon">KPL</span>
                        <a href="#">
                          KPL资格赛快讯：火豹战胜镇江VTG ，获得KPL临时席位
                        </a>
                      </div>
                      <div class="match-right">05-11</div>
                    </li>
                    <li class="match-item">
                      <div class="match-left">
                        <span class="match-icon">KPL</span>
                        <a href="#">
                          KPL资格赛快讯：零封火豹获两连胜，XYG获得KPL临时席位
                        </a>
                      </div>
                      <div class="match-right">05-10</div>
                    </li>
                    <li class="match-item">
                      <div class="match-left">
                        <span class="match-icon">KPL</span>
                        <a href="#">
                          KPL资格赛快讯：镇江VTG晋级下一轮，MTG重回K甲
                        </a>
                      </div>
                      <div class="match-right">05-10</div>
                    </li>
                    <li class="match-item">
                      <div class="match-left">
                        <span class="match-icon">KPL</span>
                        <a href="#">
                          春季赛最佳阵容候选人公布，最佳一阵、二阵即将揭晓！
                        </a>
                      </div>
                      <div class="match-right">05-10</div>
                    </li>
                    <li class="match-item">
                      <div class="match-left">
                        <span class="match-icon">KPL</span>
                        <a href="#">
                          KPL资格赛快讯：火豹零封MTG获首胜，风劫黄忠狂斩四杀
                        </a>
                      </div>
                      <div class="match-right">05-09</div>
                    </li>
                    <li class="match-item">
                      <div class="match-left">
                        <span class="match-icon">KPL</span>
                        <a href="#">
                          KPL资格赛快讯：XYG战胜镇江VTG，九月澜制胜抢龙
                        </a>
                      </div>
                      <div class="match-right">05-09</div>
                    </li>
                  </ul>
                </div>
              </div>
              <ul class="video_list">
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album09.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">1.2万</span>
                        <span class="info_date">2022-05-17</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【王者炸麦了】武汉ES续写“魔王”传奇，春日星光闪耀总决赛
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album10.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">4522</span>
                        <span class="info_date">2022-05-17</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">【头号选手】星光 因你闪耀</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album11.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">1248</span>
                        <span class="info_date">2022-05-12</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      5月11日KPL夏季赛资格赛TOP3：冲天一搏鲨星怒
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album12.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">920</span>
                        <span class="info_date">2022-05-12</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      【赛后采访】STAR：心情比较激动，夏季赛目标到时候看状态
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album13.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">566</span>
                        <span class="info_date">2022-05-12</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      KPL夏季临时席位资格赛 镇江VTG vs 火豹_5
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album13.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">394</span>
                        <span class="info_date">2022-05-11</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      KPL夏季临时席位资格赛 镇江VTG vs 火豹_4
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album13.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">315</span>
                        <span class="info_date">2022-05-11</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      KPL夏季临时席位资格赛 镇江VTG vs 火豹_3
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="video_item">
                    <div class="album">
                      <img src="./img/video_album/video_album13.jpg" alt="" />
                      <div class="info">
                        <span class="info_count">298</span>
                        <span class="info_date">2022-05-11</span>
                      </div>
                      <div class="cover">
                        <i class="icon_play"></i>
                      </div>
                    </div>
                    <div class="desc">
                      KPL夏季临时席位资格赛 镇江VTG vs 火豹_2
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="right-content">
            <div class="hero-skin">
              <div class="section_header">
                <div class="header_left">
                  <h3 class="title title_icon_hero">英雄/皮肤</h3>
                </div>
                <div class="header_right">
                  <a href="#" class="more">更多</a>
                </div>
              </div>
              <div class="tab_control">
                <div class="tab_control_item active">最新英雄</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item">最新皮肤</div>
                <div class="tab_control_line"></div>
                <div class="tab_control_item">周免英雄</div>
              </div>
              <div class="new-hero">
                <a href="#" class="hero-image">
                  <img src="./img/new_hero.webp" alt="" />
                </a>
                <div class="hero-bottom">
                  <p class="new-hero-name">新英雄：桑启</p>
                  <p class="new-hero-date">上线时间：2022.04.14</p>
                </div>
              </div>
              <ul class="hero-list">
                <li class="item">
                  <a href="#">
                    <img src="./img/hero_list/hero_item01.webp" alt="" />
                    <div class="cover">
                      <span class="icon-name">暃</span>
                    </div>
                  </a>
                </li>
                <li class="item">
                  <a href="#">
                    <img src="./img/hero_list/hero_item02.webp" alt="" />
                    <div class="cover">
                      <span class="icon-name">金 蝉</span>
                    </div>
                  </a>
                </li>
                <li class="item">
                  <a href="#">
                    <img src="./img/hero_list/hero_item03.webp" alt="" />
                    <div class="cover">
                      <span class="icon-name">云 缨</span>
                    </div>
                  </a>
                </li>
                <li class="item">
                  <a href="#">
                    <img src="./img/hero_list/hero_item04.webp" alt="" />
                    <div class="cover">
                      <span class="icon-name">艾 琳</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="kpl-schedule">
              <div class="section_header">
                <div class="header_left">
                  <h3 class="title title_icon_hero">KPL赛程</h3>
                </div>
                <div class="header_right">
                  <a href="#" class="buy">购票</a>
                  <a href="#" class="more">更多</a>
                </div>
              </div>
              <table class="schedule-time">
                <thead>
                  <tr>
                    <td>时间</td>
                    <td>战队</td>
                    <td></td>
                    <td>战队</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>5-8 18:00</td>
                    <td>
                      <div class="team">
                        <img src="./img/team_logo/team_logo01.png" alt="" />
                      </div>
                      武汉eStarPro
                    </td>
                    <td>VS</td>
                    <td>
                      <div class="team">
                        <img src="./img/team_logo/team_logo02.png" alt="" />
                      </div>
                      重庆狼队
                    </td>
                  </tr>
                </tbody>
              </table>
              <a href="#" class="match-adver">
                <img src="./img/match_schedule.webp" alt="" />
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧导航栏 -->
      <div class="right-nav">
        <div class="right-dj">
          <img src="./img/right_dj.png" alt="" />
        </div>
        <ul class="right-list">
          <li class="item code">
            <img src="./img/right_code.jpg" alt="" />
          </li>
          <li class="item weibo">
            <a href="#"></a>
          </li>
          <li class="item gzh">
            <a href="#"></a>
          </li>
          <li class="item sph">
            <a href="#"></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部模块区域 -->
    <div class="footer">
      <div class="foot main_wrapper">
        <div class="foot-top">
          <a href="#" class="foot-logo01"></a>
          <a href="#" class="foot-logo02"></a>
        </div>
        <div class="foot-bottom">
          <div class="foot-left">
            <p>
              <span>抵制不良游戏</span>
              <span>拒绝盗版游戏</span>
              <span>注意自我保护</span>
              <span>谨防受骗上当</span>
              <span>适度游戏益脑</span>
              <span>沉迷游戏伤身</span>
              <span>合理安排时间</span>
              <span>享受健康生活</span>
            </p>
            <p class="intro">
              《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。
            </p>
          </div>
          <div class="foot-right">
            <ul class="foot-list">
              <li class="foot-item">
                <a href="#">腾讯互动娱乐</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">服务条款</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">隐私保护指引</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">儿童隐私保护指引</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">腾讯游戏招聘</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">腾讯游戏客服</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">游戏列表</a>
              </li>
              <li class="foot-line">|</li>
              <li class="foot-item">
                <a href="#">广告服务及商务合作</a>
              </li>
            </ul>
            <div class="copy">
              <span>COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.</span>
              <span>腾讯公司版权所有</span>
              <span>网络游戏行业防沉迷自律公约</span>
            </div>
            <p class="report">全国文化市场统一举报电话：12318</p>
          </div>
        </div>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
